/*
 * @Author: Mark
 * @Date: 2018-09-17 11:34:26
 * @LastEditors: Mark
 * @LastEditTime: 2018-09-18 08:54:11
 * @Description: 登录模板文件
 */
<template>
    <div class="login">
        <header-login></header-login>

        <div>
            <el-main>
                <el-card class="box-card" shadow="hover">

                    <div class="icon theme-color">
                        告别旧世界-
                        <i class="fa fa-heart fa-color"></i>-建立自我派
                    </div>

                    <el-tabs type="border-card"   v-model="form.type" @tab-click="clickTab">
                        <el-tab-pane name="username">
                            <span slot="label">
                                <i class="fa fa-user-o"></i> 用户名登录</span>
                            <div>
                                <el-form :rules="rules" :model="form" ref="form" label-width="80px" class="demo-ruleForm">
                                    <el-form-item label="用户名" prop="username">
                                        <el-input v-model="form.typeValue" @blur="setUserName" clearable>
                                            <i slot="prefix" class="fa fa-user-o"></i>
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item label="密 码" prop="password">
                                        <el-input v-model="form.password" type="password" @keyup.enter.native="onSubmit('form')" clearable>
                                            <i slot="prefix" class="fa fa-key fa-fw"></i>
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button style=" width:100%" type="primary" plain @click="onSubmit('form')">登录</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </el-tab-pane>

                         <el-tab-pane  name="phone">
                            <span slot="label">
                                <i class="fa fa-mobile-phone"></i> 手机号登录</span>
                            <div>
                                <el-form :rules="rules" :model="form" ref="form" label-width="80px" class="demo-ruleForm">
                                    <el-form-item label="手机号" prop="phone">
                                        <el-input v-model="form.typeValue"  @blur="setPhone" clearable>
                                            <i slot="prefix" class="fa fa-mobile-phone"></i>
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item label="密 码" prop="password">
                                        <el-input v-model="form.password" type="password" @keyup.enter.native="onSubmit('form')" clearable>
                                            <i slot="prefix" class="fa fa-key fa-fw"></i>
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button style=" width:100%" type="primary" plain @click="onSubmit('form')">登录</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </el-tab-pane>

                         <el-tab-pane  name="email">
                            <span slot="label">
                                <i class="fa fa-envelope-o fa-fw"></i> 邮箱登录</span>
                            <div>
                                <el-form :rules="rules" :model="form" ref="form" label-width="80px" class="demo-ruleForm">
                                    <el-form-item label="邮箱" prop="email">
                                        <el-input v-model="form.typeValue" type="email" @blur="setEmail"  clearable>
                                            <i slot="prefix" class="fa fa-envelope-o fa-fw"></i>
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item label="密 码" prop="password">
                                        <el-input v-model="form.password" type="password" @keyup.enter.native="onSubmit('form')" clearable>
                                            <i slot="prefix" class="fa fa-key fa-fw"></i>
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button style=" width:100%" type="primary" plain @click="onSubmit('form')">登录</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </el-tab-pane>
                    </el-tabs>

                    <div class="link-item">
                        <router-link to="/forget" class="link">忘记密码
                            <i class="fa fa-unlock-alt"></i>
                        </router-link>
                        <router-link to="/register" class="link">免费注册>></router-link>
                    </div>

                </el-card>
            </el-main>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import index from '@/assets/js/login/login.js'
export default {
    ...index
}
</script>

<style scoped lang="scss">
@import '@/assets/css/login/login.scss';
</style>
